<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础雷达图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.0-beta.4/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script>
var _DataSet = DataSet,
  DataView = _DataSet.DataView;

var data = [{
  item: 'Design',
  a: 70,
  b: 30
}, {
  item: 'Development',
  a: 60,
  b: 70
}, {
  item: 'Marketing',
  a: 50,
  b: 60
}, {
  item: 'Users',
  a: 40,
  b: 50
}, {
  item: 'Test',
  a: 60,
  b: 70
}, {
  item: 'Language',
  a: 70,
  b: 50
}, {
  item: 'Technology',
  a: 50,
  b: 40
}, {
  item: 'Support',
  a: 30,
  b: 40
}, {
  item: 'Sales',
  a: 60,
  b: 40
}, {
  item: 'UX',
  a: 50,
  b: 60
}];
var dv = new DataView().source(data);
dv.transform({
  type: 'fold',
  fields: ['a', 'b'], // 展开字段集
  key: 'user', // key字段
  value: 'score' // value字段
});
var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight,
  padding: [20, 20, 95, 20]
});
chart.source(dv, {
  score: {
    min: 0,
    max: 80
  }
});
chart.coord('polar', {
  radius: 0.8
});
chart.axis('item', {
  line: null,
  tickLine: null,
  grid: {
    lineStyle: {
      lineDash: null
    },
    hideFirstLine: false
  }
});
chart.axis('score', {
  line: null,
  tickLine: null,
  grid: {
    type: 'polygon',
    lineStyle: {
      lineDash: null
    }
  }
});
chart.legend('user', {
  marker: 'circle',
  offset: 30
});
chart.line().position('item*score').color('user').size(2);
chart.point().position('item*score').color('user').shape('circle').size(4).style({
  stroke: '#fff',
  lineWidth: 1,
  fillOpacity: 1
});
chart.area().position('item*score').color('user');
chart.render();
</script>
</body>
</html>
